import { DEFAULT_NODE_PORTS,DEFAULT_STATUS_COLOR } from "../metadata"
import outputUrl from "../../svg/output.svg?url"
import { set } from "lodash-es";
import {t} from "../../i18n/index"
//
export default {
  width: 80,
  height: 80,
  zIndex:50,
  attrs: {
    body: {
      stroke: '#5F95FF',
      strokeWidth: 2,
      fill: 'rgba(255,255,255,1)',
      refWidth: 1,
      refHeight: 1,
      rx: 8,
      ry: 8,
    },
    icon: {
      xlinkHref: outputUrl,
      width: "50",
      height: "50",
      xAlign: "middle",
      yAlign: "middle",
      refX: "50%",
      refY: "50%",
      refY2:-8
    },
    label: {
      refY: '100%',
      refX: "50%",
      // x:"-50",
      refY2: -5,
      fontSize: 14,
      xAlign: "middle",
      yAlign: "bottom",
      fill:"#666",
      textWrap: {
        width: 70,
        height: "20",
        ellipsis: true,
      }
    },
  },
  markup: [
    { tagName: 'rect', selector: 'body' },
    { tagName: "image", selector: "icon" },
    { tagName: 'text', selector: 'label' },
  ],
  ports: {groups:DEFAULT_NODE_PORTS.groups,items:[DEFAULT_NODE_PORTS.items[0]]},
  // 只有用 prop({key:value}) 才会触发 prophoooks
  propHooks(metadata: any) {
    const { label,status } = metadata;
    if(label){
      set(metadata,'attrs.label.text',label)
    }
    if (status){
          const c: string = DEFAULT_STATUS_COLOR[status] || '#fff';
          set(metadata, 'attrs.body.stroke', c)
        }
    return metadata;
  }
}


